<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>地域分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>各省份活跃访客分布图</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="location_province_active_users" style="height: 800px;">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <!-- highcharts js -->
    <!-- <script type="text/javascript" src="../resources/js/highcharts.js"></script> -->
    <script type="text/javascript" src="../resources/js/highmaps.src.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>
    <script type="text/javascript" src="../resources/js/cn-all.js"></script>
    <script type="text/javascript" src="../resources/js/provinceConvert.js"></script>

    <script type="text/javascript">

        function loadProvinceActiveUsers(sd, ed) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/location?metric=uv&platform=website&group_by=province&country=中国";
            url += "&start_date=" + sd + "&end_date=" + ed;
            $.get(url, {}, function(data){
                if (data.code == '200') {
                    if (data.data == null || data.data.length == 0) {
                        showNoConnent("location_province_active_users");
                        return ;
                    }

                    var seriesData = {};
                    for(var k in provinceMap) {
                        seriesData[provinceMap[k][1]] = {"hc-key":provinceMap[k][1], "value":0, "cnname":provinceMap[k][0]};
                    }
                    $.each(data.data, function(i, item){
                        var province = convertProvince(item["province"]);
                        if (province) {
                            var v = item["$uv"];
                            var a = province[0]; // 中文名
                            var b = province[1]; // higchart名
                            seriesData[b] = seriesData[b] ? seriesData[b] : {"hc-key":b, "value":0, "cnname":a};
                            seriesData[b]["value"] = seriesData[b]["value"] + v;
                        }
                    });
                    var data = [];
                    for (var k in seriesData) {
                        data.push(seriesData[k]);
                    }

                    // Initiate the chart
                    $('#location_province_active_users').highcharts('Map', {
                        mapNavigation: {
                            enabled: true,
                            buttonOptions: {
                                verticalAlign: 'bottom'
                            }
                        },
                        tooltip: {
                            pointFormat: '{point.cnname}:<b>{point.value}</b>'
                        },
                        colorAxis: {
                            min: 0,
                            minColor: '#EEEEFF',
                            maxColor: '#000022',
                            stops: [
                                [0, '#EFEFFF'],
                                [0.67, '#4444FF'],
                                [1, '#000022']
                            ]
                        },
                        series : [{
                            data : data,
                            mapData: Highcharts.maps['countries/cn/cn-all'],
                            joinBy: 'hc-key',
                            name: '活跃访客省份分布图',
                            states: {
                                hover: {
                                    color: '#BADA55'
                                }
                            },
                            dataLabels: {
                                enabled: true,
                                format: '{point.cnname}'
                            }
                        }]
                    });
                } else {
                    showNoConnent("location_province_active_users", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
                }
            }, "json");
        }

        $(document).ready(function(){
            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            loadProvinceActiveUsers(sd, ed);
        });
    </script>
</body>
</html>